<template>
  <div class="box">
    <div class="btnBox">
      <el-button type="primary">积分任务</el-button>
      <el-button type="primary" style="margin-right: 20px" @click="addLevel"
        >添加等级</el-button
      >
    </div>
    <div class="tableBox">
      <el-table :data="tableData" border style="width: 100%" align="center">
        <el-table-column
          prop="date"
          align="center"
          label="等级名称"
          width="120"
        />
        <el-table-column
          align="center"
          prop="name"
          label="默认会员等级"
          width="120"
        />
        <el-table-column
          align="center"
          prop="name"
          label="成长积分"
          width="180"
        />
        <el-table-column align="center" prop="name" label="折扣" width="180" />
        <el-table-column align="center" prop="name" label="备注" width="180" />
        <el-table-column align="center" prop="name" label="操作">
          <el-link type="primary" style="margin-right: 10px" @click="editor"
            >编辑</el-link
          ></el-table-column
        >
      </el-table>
    </div>
  </div>
</template>

<script lang="ts" setup>
import router from "../../router";
const editor: any = function () {
  router.push("/mainView/LevelMembership/levelMemberEditor");
};
interface User {
  date: string;
  name: string;
  address: string;
}
const addLevel: any = function () {
  router.push("/mainView/LevelMembership/addLevel");
};
const tableData: User[] = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
</script>

<style scoped>
.box {
  width: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.btnBox {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.tableBox {
  box-sizing: border-box;
  width: 90%;
  padding: 0 20px;
}
</style>
